<template>
  <div>
    <el-dropdown>
      <span class="el-dropdown-link">
        <div class="block">
          <!--:src="circleUrl"   -->
          <el-avatar
            shape="square"
            :size="30"
            src="https://reclaim-me.oss-cn-shenzhen.aliyuncs.com/user/orderimages/1630219018755993601/1682338232086/1682338232089.png"
          />
        </div>
        <!-- 用户名 -->
        <span class="userinfo">超级管理员</span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="exitLoginReq">退出登录</el-dropdown-item>
          <el-dropdown-item divided @click="UserCenterReq"
            >个人中心</el-dropdown-item
          >
          <el-dropdown-item>修改头像</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import LocalCache from "@/utils/cache";
import router from "@/router";
import { h } from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  setup() {
    // 头像地址
    const imgUrl =
      "https://reclaim-me.oss-cn-shenzhen.aliyuncs.com/user/orderimages/1630219018755993601/1681433917125/1681433917125.jpg";
    const exitLoginReq = () => {
      LocalCache.deleteCache("token");
      ElMessage({
        message: h("p", null, [
          h("span", null, "退出登录 "),
          h("i", { style: "color: teal" }, "成功")
        ])
      });
      router.push({ name: "login" });
    };
    const UserCenterReq = () => {
      router.push({ name: "usercenter" });
    };
    return {
      imgUrl,
      exitLoginReq,
      UserCenterReq
    };
  }
});
</script>
<style scoped lang="less">
.el-dropdown-link {
  display: flex;
  margin-top: 5px;
  .block {
    display: flex;
  }
  .userinfo {
    margin-top: 10px;
  }
}
</style>
